<template>
	<el-container>
<el-header class="todolistTop">
	<div class="todolistTop-head">
		<div class="left-panel" style="width: 60%;">
			<div class="todotitleTopImg"></div>
			<span class="todotitle">审批中心</span>
		</div>
		<div class="right-panel">
			<div class="todolistTop-headRightBox" v-if="isIndexWidgets">
				<div class="headtodo">
				<span  @click="searchHandler('0','wait_audit')"  :class="pendingStatus==='wait_audit'?'itemActive':'itemUnActive'">待办({{statistics.wait_audit||0}})</span>
				<div :class="pendingStatus==='0'?'itemActiveLine':'itemUnActiveLine'"></div>
			</div>
			<div class="headtodo">
                <span @click="searchHandler('1','wait_process')" :class="relObjectStatus==='wait_process'?'itemActive':'itemUnActive'">审批中({{statistics.wait_process||0}})</span>
				<div :class="relObjectStatus==='wait_process'?'itemActiveLine':'itemUnActiveLine'"></div>
			</div>
			<div class="headtodo" >
				<span @click="searchHandler('','finish')" :class="relObjectStatus==='finish'?'itemActive':'itemUnActive'">已办结({{statistics.finish||0}})</span>
				<div :class="relObjectStatus==='finish'?'itemActiveLine':'itemUnActiveLine'"></div>
			</div>
			<div class="headtodo" >
				<span @click="searchHandler('','hang_up')" :class="relObjectStatus==='hang_up'?'itemActive':'itemUnActive'">已挂起({{statistics.hang_up||0}})</span>
				<div :class="relObjectStatus==='hang_up'?'itemActiveLine':'itemUnActiveLine'"></div>
			</div>
		</div>


			</div>
		</div>

</el-header>
		<el-main class="nopadding">
			<el-container>
				<el-main class="nopadding todolist" v-if="isAlready" style="margin-bottom: 0px;">
					<ex-table  id="pendingTable" ref="table" :class="isIndexWidgets?'sytable':''" :height="tableHeight" size="small" :columns="columns" :pagination="!isIndexWidgets" :url="this.$API.system.pending.list.url"
							   :params="fixParams" :auto-refresh="false" :selection="false" @columnClick="columnClickHandler"  class="homeTable-Box"></ex-table>

<!--					<ex-table  id="pendingTable" ref="table" :class="isIndexWidgets?'sytable':''" :height="isIndexWidgets?214:null" size="small" :columns="columns" :pagination="!isIndexWidgets" :url="this.$API.system.pending.list.url"-->
<!--					:params="fixParams" :auto-refresh="false" :selection="false" @columnClick="columnClickHandler"  class="homeTable-Box"></ex-table>-->
<div class="todolistmore-headRightBox"  @click="toMore">
									<span class="noticetitleTopMoretitle">查看更多></span>

								</div>
				</el-main>
			</el-container>

		</el-main>
	</el-container>
</template>

<script>
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";

export default {
	name: '审批中心',
	components: {
		ExSearchTree,
		ExSearch,
		ExTable,
	},
	props:{
		isIndexWidgets: {type:Boolean,default:false}
	},
	data() {
		return {
			statistics:{},
			pendingStatus:'0',
			relObjectStatus:null,
			messageCount:this.$store.state.websocket,
			columns: [
				{code: "title", name: "名称", width: "", click: "show1",tooltiphide:true},
				{code: "content", name: "内容", width: ""},
				{code: "pendingStatus", name: "处理状态", width: "75",formatter: "DICT",key:"PENDING_STATUS"},
				{code: "createUser", name: "申请人", width: "75",formatter: "DICT",key: "SysUser"},
				{code: "relObjectStatus", name: "事项状态", width: "75",formatter: "DICT",key:"REL_OBJECT_STATUS"},
				// {code: "finishUser", name: "办结人", width: "80",formatter: "SysUser"},
				{code: "createTime", name: "时间", width: "75", formatter: "DATE"},

			],
			parentLevelCode: null,
			isAlready:false,
			fixParams:{},
			loginUser: this.$TOOL.current.user(),
			tableHeight:100,//表格高度
		}
	},
	watch:{
		messageCount:{
			handler(){
				this.searchHandler("0","wait_audit");
			},
			deep:true
		},
	},
	created() {
		if(this.isIndexWidgets){
			this.fixParams = {pageSize:5};
			if(window.innerWidth>1690 && window.innerWidth<1990){
				this.fixParams = {pageSize:6};
			}
			this.columns= [
				{code: "title", name: "名称", width: "", click: "show1",tooltiphide:true},
				{code: "createUser", name: "申请人", width: "70",formatter: "DICT",key: "SysUser"},
				//{code: "relObjectStatus", name: "事项状态", width: "140",formatter: "DICT",key:"REL_OBJECT_STATUS"},
				{code: "createTime", name: "时间", width: "100", formatter: "DATE"},
			];
		}
		this.isAlready = true;
	},
	mounted() {
		this.searchHandler(this.pendingStatus,"wait_audit");
		this.tableHeightFun()//计算表格高度
	},
	methods: {
		tableHeightFun(){//计算表格高度
			var screenHeight = document.documentElement.clientHeight;
			var clientWidth = document.documentElement.clientWidth;
			let contH=(screenHeight-304-60)/2;
			if(clientWidth<1600){
				contH=(screenHeight-236)/2;
			}
			this.tableHeight=contH-90;
		},
		buttonHandler(index, name) {
			this.$options.methods[name](this, index);
		},
		async searchTreeHandler(data) {
			this.parentLevelCode = data.levelCode;
			let queryParams = {pathCode: this.parentLevelCode}
			await this.$refs.table.refresh(queryParams);
		},
		async searchHandler(pendingStatus,relObjectStatus) {
			if(pendingStatus===undefined&&relObjectStatus===undefined){
				pendingStatus='0';
			}
			this.pendingStatus=pendingStatus;
			this.relObjectStatus=relObjectStatus;
			let queryParams = {pathCode: this.parentLevelCode, pendingStatus: pendingStatus,relObjectStatus:relObjectStatus}

			this.$refs.table.refresh(queryParams);
			let res = await this.$API.system.pending.statusStatistics.post({isStatisticsMySelf:true});
			if(res.code===2000){
				this.statistics = res.map;
			}

		},
		columnClickHandler(name, data) {
			this.$options.methods[name](this, data);
		},
		toMore(){
			let title = "待办";
			let status="pending";
			if(this.pendingStatus==="0"){
				status="pending";
				title = "待办";
			}else if(this.relObjectStatus==='wait_process'){
				status="wait_process";
				title = "审批中";

			}else if(this.relObjectStatus==='finish'){
				status="finish";
				title = "已办结";
			}else if(this.relObjectStatus==='hang_up'){
				status="hang_up";
				title = "已挂起";
			}
			localStorage.setItem("syaudit",status);

			//跳转页面
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
			this.$router.push({
				name: "Pendinglist",
				params: {fromRouteId: fromRouteId}
			});
		},
		//查看
		async show1(_this, row) {
			if (row.pendingType.includes("document")) {
				let strs = row.relObjectId.split(":");
				let rsp = await _this.$API.asset.document.findById.post({id: strs[0]});
				if (rsp.code === 2000) {
					let document = rsp.data;
					_this.$router.push({
						name: "documentPrepare",
						params: {
							fromRouteId: _this.$TOOL.crypto.MD5(_this.$route.path),
							configId: document.documentConfigId,
							id: document.id
						}
					});
				}
			} else if (row.pendingType.includes("asset_check")) {

			} else {
				this.$message.warning("未知的待办事项类型,请联系管理员处理");
			}
		},
	}
}
</script>

<style scoped>
.todolistTop-head{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
.todolistTop-headRightBox{
	right: 14px;cursor: pointer;display:flex;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid transparent;
	float: right;
	margin-top: -8px;
	border-radius: 3px;
	margin-right: 0px;
	width: 300px;
}
.todolistmore-headRightBox{
	right: 14px;cursor: pointer;display:flex;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid transparent;
	float: right;
	margin-top: -5px;
	width: 80px;
	border-radius: 3px;
	margin-right: 2px;
}
.todolistmore-headRightBox:hover{


	border: 1px solid transparent;
}

.itemActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #333333;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
  font-weight: 500;
}
.itemActiveLine{
	background-color: #427CFF;
  border-radius: 2px;
  width: 32px;
  height: 4px;
  margin:  auto;
}

.itemActiveMore:hover{
    margin-left: 91%;
	background-color: rgba(106, 131, 252, .7) !important;
	color: #fff !important;
	float: right;
}
.itemUnActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #666666;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
  font-weight: 500;

}
.sytable{
	height: 88% !important;
}
.sytable .el-table{
	margin-bottom: 0px;
	height: 110% !important;
}

.todotitle{
	width: 77px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;

  margin: 0px 0 0 12px;
  font-weight: 500;
}
.todolistTop{
  height: 27px;
  margin: 7px 0 0 16px;

padding: 0 !important;
margin-bottom: 7px;
justify-content:left
}
.todotitleTopImg{
	width: 20px;
  height: 20px;
  background: url(../../../../../public/img/homeTodoTop.png)
    100% no-repeat;
  background-size: 100% 100%;

}
.todotitleTopMoreImg{
	width: 22px;
  height: 22px;
  background: url(../../../../../public/img/homeTodoTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
}
.todotitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(1, 123, 207, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}
.headtodo{
	width: 100px;text-align: center;
}
@media (min-width: 1200px) and (max-width: 1500px){
	.todolistTop-headRightBox{
		right:0;
	}
	.itemUnActive{
		font-size: 12px;
	}
	.itemActive{
		font-size: 12px;
	}
	.headtodo{
	width: 60px;text-align: center;
}
.itemActiveLine{
width: 26px;
}

}

.noticetitleTopMoreImg{
	width: 4px;
  height: 14px;
  background: url(../../../../../public/img/homeNoticeTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-left: 5px;
  float: left;
}
.noticetitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: #427CFF;
  font-size: 13px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}



</style>
